<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .container1 {
            height: 200px;
        }

        .container2 {
            height: 200px;
        }

        .container3 {
            height: 200px;
        }

        .container1 .box1 {
            background: red;
            display: block;
        }

        .container1 .box2 {
            background: blue;
            display: none;
        }

        .container1 .box3 {
            background: yellow;
            display: none;
        }

        .container2 .box1 {
            background: red;
            display: block;
        }

        .container2 .box2 {
            background: blue;
            display: none;
        }

        .container2 .box3 {
            background: yellow;
            display: none;
        }

        .container3 .box1 {
            background: red;
            display: block;
        }

        .container3 .box2 {
            background: blue;
            display: none;
        }

        .container3 .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <div class="container2">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <button class="next">点击我切换第二个选项卡下一页</button>

    <div class="container3">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    <script>
        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll(".container1 div");
        tab(btns, divs);


        let btn2s = document.querySelectorAll(".container2 button");
        let div2s = document.querySelectorAll(".container2 div");
        // true 代表  有下一页功能
        tab(btn2s, div2s, true);

        let btn3s = document.querySelectorAll(".container3 button");
        let div3s = document.querySelectorAll(".container3 div");
        tab(btn3s, div3s);

        function tab (btns, divs, isNext) {
            let tabKey = 0; // 第二选项卡 当前所在的索引值；
            btns.forEach((item, key) => {
                item.onclick = () => {
                    tabKey = key;
                    forDiv(key);

                }
                forDiv = (key) => divs.forEach((div, k) => key === k ? div.style.display = "block" : div
                    .style.display = "none");
                //判断是否有下一页功能
                if (isNext) {
                    document.querySelector(".next").onclick = ()=> {
                        tabKey++;
                        if (tabKey > 2) tabKey = 0;
                        forDiv(tabKey);
                    }
                }
            });
        }
    </script>

</body>

</html>